<template>
  <n-card :bordered="false" content-style="padding: 0">
    <n-form label-placement="left">
      <n-grid :cols="4" x-gap="15">
        <n-form-item-grid-item label="主键" label-placement="left" :show-feedback="false">
          <n-input v-model:value="form.id" />
        </n-form-item-grid-item>
        <n-form-item-grid-item label="名称" label-placement="left" :show-feedback="false">
          <n-input v-model:value="form.name" />
        </n-form-item-grid-item>
      </n-grid>
    </n-form>
    <n-card
      :bordered="false"
      content-style="padding: 15px 0; display: flex; justify-content: space-between;"
    >
      <n-space>
        <n-button type="info" @click="handleInsertOnClick">新增</n-button>
      </n-space>
      <n-space>
        <n-button type="info" @click="handleSelectOnClick">查询</n-button>
        <n-button type="info" @click="handleReset(form)">重置</n-button>
        <n-tooltip placement="bottom">
          <template #trigger>
            <n-icon size="28">
              <Settings />
            </n-icon>
          </template>
          列设置
        </n-tooltip>
      </n-space>
    </n-card>
    <n-data-table
      table-layout="fixed"
      :bordered="false"
      :loading="loading"
      :columns="columns"
      :data="records"
      :pagination="pagination"
      remote
    />
    <PoemModal
      :show="ModalData.show"
      :title="ModalData.title"
      :row="ModalData.row"
      @handleCloseOnClick="handleCloseOnClick"
      @handleSelectOnClick="handleSelectOnClick"
    />
  </n-card>
</template>
<script lang="ts" setup>
import { Settings } from '@vicons/carbon'
import { basicColumns } from './columns'
import { getPoemPage, deletePoem } from '@/api/literature/Poem'
import { usePagination } from '@/hooks/usePagination'
import { postOrPutUpCount } from '@/api/literature/UpCount'
import PoemModal from './modal/PoemModal.vue'

const state = reactive({
  loading: false,
  pagination: usePagination(handleSelectOnClick),
  form: {} as LiteraturePoemPO,
  records: [] as LiteraturePoemPO[],
  ModalData: {
    show: false,
    title: '',
    row: {} as LiteraturePoemPO
  }
})

const { loading, records, pagination, form, ModalData } = toRefs(state)

const columns: ComputedRef<DataTableColumns<LiteraturePoemPO>> = computed(() => {
  const buttons = [
    { label: '修改', onClick: handleUpdateOnClick },
    { label: '删除', onClick: handleDeleteOnClick },
    { label: '点赞', onClick: handleUpCountOnClick }
  ]
  return [
    ...basicColumns,
    {
      key: 'action',
      title: '操作',
      render(row) {
        return createTableButtons<LiteraturePoemPO>(buttons, row)
      }
    }
  ]
})

onMounted(() => {
  handleSelectOnClick()
})

async function handleSelectOnClick() {
  state.loading = true
  const { data } = await getPoemPage(state.pagination, state.form)
  state.records = data.records
  state.pagination.pageCount = data.pages
  state.pagination.prefix = () => `总条数为${data.total}`
  state.loading = false
}

const handleInsertOnClick = () => {
  state.ModalData.row = {} as LiteraturePoemPO
  state.ModalData.show = true
  state.ModalData.title = '新增'
}

const handleUpdateOnClick = (row: LiteraturePoemPO) => {
  state.ModalData.row = row
  state.ModalData.show = true
  state.ModalData.title = '修改'
}

const handleDeleteOnClick = (row: LiteraturePoemPO) => {
  IConfirmMessage({
    content: '确认删除？',
    onPositiveClick: async () => {
      await deletePoem(row.id)
      handleSelectOnClick()
    }
  })
}

const handleUpCountOnClick = async (row: LiteraturePoemPO) => {
  const po = {
    literatureId: row.id,
    type: _Literature_Type.Poem
  } as LiteratureUpCountPO
  await postOrPutUpCount(po)
  handleSelectOnClick()
}

const handleCloseOnClick = () => {
  state.ModalData.show = false
}
</script>
